<template>
    <div>
 <el-button text @click="dialogVisible = true">
         查看土层参数表格
  </el-button>
  <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="90%"
  >

  <el-table :data="tableData" style="width: 120% " :header-cell-style="{textAlign: 'center'}">
         
         <el-table-column label="地层名">
           <el-table-column prop="name" label="及编号" width="120" />
         </el-table-column>

         <el-table-column label="土层厚度">
           <el-table-column prop="name" label="(m)" width="100" />
         </el-table-column>

         <el-table-column label="土层重度γ">
           <el-table-column prop="name" label="(kN/m3)" width="120" />
         </el-table-column>


         <el-table-column label="承载力特征值">
           <el-table-column prop="name" label="fak(Pa)" width="120" />
         </el-table-column>

         <el-table-column label="压缩模量Es0.1-0.2">
           <el-table-column prop="name" label="(MPa)" width="85" />
         </el-table-column>

         <el-table-column label="动态压缩模量Ed">
           <el-table-column prop="name" label="(MPa)" width="85" />
         </el-table-column>

         <el-table-column prop="大头" label="泊松比" width="80" />
         <el-table-column prop="大头" label=" 抗拔系数λ" width="80" />

         <el-table-column prop="大头" label="粘聚力C(kPa)" width="120" />
         <el-table-column prop="大头" label="内摩擦角φ（度）" width="120" />       

         <el-table-column label="预制桩">
           <el-table-column prop="name" label="桩的极限侧阻力标准值qsik(kPa)" width="120" />
           <el-table-column prop="name" label="桩的极限端阻力标准值qpk(kPa)" width="120" />
           <el-table-column prop="name" label="比例系数" width="120" >
           <el-table-column prop="name" label="m(MN/m4)" width="120" />
         </el-table-column>

         </el-table-column>
         <el-table-column label="钻孔灌注桩">
           <el-table-column prop="name" label="桩的极限侧阻力标准值qsik(kPa)" width="120" />
           <el-table-column prop="name" label="桩的极限端阻力标准值qpk(kPa)" width="120" />

           <el-table-column prop="name" label="比例系数m(MN/m4)" width="120" />
   

         </el-table-column>
       </el-table>
  </el-dialog>
    </div>
  </template>
  <script setup lang="ts">
  import MainViewCompent from "@/components/home/MainViewCompent.vue";
  import ContentBarVue from "@/components/common/bar/ContentBar.vue";
  import OperationBarVue from "@/components/common/bar/OperationBar.vue";
    
  const upload = () => {};
  const download = () => {};
  const dialogVisible = ref(false)
  const tableData = [
    {
      date: "2016-05-03",
      name: "Tom",
      state: "California",
      city: "Los Angeles",
      address: "No. 189, Grove St, Los Angeles",
      zip: "CA 90036",
    },
    {
      date: "2016-05-02",
      name: "Tom",
      state: "California",
      city: "Los Angeles",
      address: "No. 189, Grove St, Los Angeles",
      zip: "CA 90036",
    },
    {
      date: "2016-05-04",
      name: "Tom",
      state: "California",
      city: "Los Angeles",
      address: "No. 189, Grove St, Los Angeles",
      zip: "CA 90036",
    },
    {
      date: "2016-05-01",
      name: "Tom",
      state: "California",
      city: "Los Angeles",
      address: "No. 189, Grove St, Los Angeles",
      zip: "CA 90036",
    },
    {
      date: "2016-05-08",
      name: "Tom",
      state: "California",
      city: "Los Angeles",
      address: "No. 189, Grove St, Los Angeles",
      zip: "CA 90036",
    },
    {
      date: "2016-05-06",
      name: "Tom",
      state: "California",
      city: "Los Angeles",
      address: "No. 189, Grove St, Los Angeles",
      zip: "CA 90036",
    },
    {
      date: "2016-05-07",
      name: "Tom",
      state: "California",
      city: "Los Angeles",
      address: "No. 189, Grove St, Los Angeles",
      zip: "CA 90036",
    },
  ];
  </script>
  
  <style lang="less" scoped></style>
  